<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="auto"
    >
      <el-form-item label="类型" prop="productType">
        <el-select
          v-model="queryParams.productType"
          clearable
          placeholder="请选择"
          @change="handleSelectType"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div style="margin-bottom: -30px">
      <el-button
        type="warning"
        size="mini"
        icon="el-icon-download"
        @click="handleExport"
        >导出</el-button
      >
    </div>
    <div style="text-align: center; margin-bottom: 4px; height: 34px">
      <span v-show="year">{{ year }}年</span>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 240px)"
      border
    >
      <el-table-column
        prop="productType"
        label="产品类型"
        width="150px;"
      ></el-table-column>
      <el-table-column prop="month1" label="1月"></el-table-column>
      <el-table-column prop="month2" label="2月"></el-table-column>
      <el-table-column prop="month3" label="3月"></el-table-column>
      <el-table-column prop="month4" label="4月"></el-table-column>
      <el-table-column prop="month5" label="5月"></el-table-column>
      <el-table-column prop="month6" label="6月"></el-table-column>
      <el-table-column prop="month7" label="7月"></el-table-column>
      <el-table-column prop="month8" label="8月"></el-table-column>
      <el-table-column prop="month9" label="9月"></el-table-column>
      <el-table-column prop="month10" label="10月"></el-table-column>
      <el-table-column prop="month11" label="11月"></el-table-column>
      <el-table-column prop="month12" label="12月"></el-table-column>
    </el-table>
    <div id="myEchart" style="width:100%;height:400px;"></div>
    <div id="myEchart2" style="width:100%;height:400px;"></div>
    <div id="myEchart3" style="width:100%;height:400px;"></div>
  </div>
</template>

<script>
import { getMditem } from "@/api/mes/report/material.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      options: [
        {
          label: "直流充电桩",
          value: "DC",
        },
        {
          label: "交流充电桩",
          value: "AC",
        },
        {
          label: "车载",
          value: "VM",
        },
        {
          label: "国内电桩",
          value: "1",
        },
        {
          label: "国外电桩",
          value: "2",
        },
        {
          label: "国内车载",
          value: "3",
        },
        {
          label: "国外车载",
          value: "4",
        },
      ],
      // 遮罩层
      loading: false,
      queryParams: {
        productType: null,
      },
      tableData: [],
      year: null,
      option: {
        title: {
          text: "不齐套数",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["直流充电桩", "交流充电桩", "车载", "国内电桩", "国外电桩", "国内车载", "国外车载"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "直流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "交流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "车载",
            type: "line",
            data: [],
          },
          {
            name: "国内电桩",
            type: "line",
            data: [],
          },
          {
            name: "国外电桩",
            type: "line",
            data: [],
          },
          {
            name: "国内车载",
            type: "line",
            data: [],
          },
          {
            name: "国外车载",
            type: "line",
            data: [],
          },
        ],
      },
      option2: {
        title: {
          text: "任务总数",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["直流充电桩", "交流充电桩", "车载", "国内电桩", "国外电桩", "国内车载", "国外车载"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "直流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "交流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "车载",
            type: "line",
            data: [],
          },
          {
            name: "国内电桩",
            type: "line",
            data: [],
          },
          {
            name: "国外电桩",
            type: "line",
            data: [],
          },
          {
            name: "国内车载",
            type: "line",
            data: [],
          },
          {
            name: "国外车载",
            type: "line",
            data: [],
          },
        ],
      },
      option3: {
        title: {
          text: "齐套率",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["直流充电桩", "交流充电桩", "车载", "国内电桩", "国外电桩", "国内车载", "国外车载"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "直流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "交流充电桩",
            type: "line",
            data: [],
          },
          {
            name: "车载",
            type: "line",
            data: [],
          },
          {
            name: "国内电桩",
            type: "line",
            data: [],
          },
          {
            name: "国外电桩",
            type: "line",
            data: [],
          },
          {
            name: "国内车载",
            type: "line",
            data: [],
          },
          {
            name: "国外车载",
            type: "line",
            data: [],
          },
        ],
      },
      myChart: null,
      myChart2: null,
      myChart3: null
    };
  },
  created() {
    this.getList();
  },
  mounted(){
    this.init()
  },
  methods: {
    init() {
      var chartDom = document.getElementById("myEchart");
      var chartDom2 = document.getElementById("myEchart2");
      var chartDom3 = document.getElementById("myEchart3");
      this.myChart = echarts.init(chartDom);
      this.myChart2 = echarts.init(chartDom2);
      this.myChart3 = echarts.init(chartDom3);
    },
    handleSelectType(e) {},
    handleExport() {
      this.download(
        "/mes/report/mditem/export",
        {
          ...this.queryParams,
        },
        `物料齐套报表列表.xlsx`
      );
    },
    /** 查询生产报工记录列表 */
    getList() {
      this.loading = true;
      getMditem(this.queryParams)
        .then((response) => {
          this.tableData = response.data.reportVoList || [];
          let arr1 = []
          let arr2 = []
          let arr3 = []
          this.tableData.forEach(item => {
            if(item.productType.includes("不齐套数")){
              let arr0 = []
              for(let i=1;i<=12;i++){
                arr0.push(Number(item[`month${i}`]))
              }
              arr1.push(arr0)
            }else if(item.productType.includes("任务总数")){
              let arr0 = []
              for(let i=1;i<=12;i++){
                arr0.push(Number(item[`month${i}`]))
              }
              arr2.push(arr0)
            }else if(item.productType.includes("齐套率")){
              let arr0 = []
              for(let i=1;i<=12;i++){
                arr0.push(parseFloat(item[`month${i}`]))
              }
              arr3.push(arr0)
            }
          })
          this.option.series.forEach((item,index) =>{
            item.data = arr1[index]
          })
          this.option2.series.forEach((item,index) =>{
            item.data = arr2[index]
          })
          this.option3.series.forEach((item,index) =>{
            item.data = arr3[index]
          })
          console.log(333,arr3)
          this.myChart.setOption(this.option);
          this.myChart2.setOption(this.option2);
          this.myChart3.setOption(this.option3);
          this.year = response.data.year;
          this.loading = false;
        })
        .catch((err) => {
          this.tableData = [];
          this.loading = false;
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
  },
};
</script>
